<template>
  <view class="w-160rpx mt-20rpx flex-col items-center justify-center text-center">
    <view class="flex justify-between py-2rpx">
      <text class="text-gray-400">会员姓名：</text> <text>{{ merberInfo.customerName }}</text>
    </view>
    <view class="flex justify-between py-2rpx">
      <text class="text-gray-400">会员卡号：</text> <text>{{ merberInfo.logicalCardNumber }}</text>
    </view>
    <view class="flex justify-between py-2rpx">
      <text class="text-gray-400">卡类型：</text>
      <text>{{ cardTypeMap[cardInfo.membershipCardType] || "-" }}</text>
    </view>

    <!-- 会员卡 -->
    <view v-if="cardInfo.membershipCardType == 1" class="flex justify-between py-2rpx">
      <text class="text-gray-400">会员等级</text> <text>{{ accountInfo.membershipLevelName || "-" }}</text>
    </view>

    <view v-if="cardInfo.membershipCardType == 1" class="flex justify-between py-2rpx">
      <text class="text-gray-400">商户账户余额</text> <text>￥{{ accountInfo.businessMoney || 0 }}</text>
    </view>
    <view v-if="cardInfo.membershipCardType == 1" class="flex justify-between py-2rpx">
      <text class="text-gray-400">平台账户余额</text> <text>￥{{ accountInfo.vaMoney || 0 }}</text>
    </view>
    <view v-if="cardInfo.membershipCardType == 1" class="flex justify-between py-2rpx">
      <text class="text-gray-400">赠送账户余额</text> <text>￥{{ accountInfo.giveMoney || 0 }}</text>
    </view>

    <!-- 套餐卡 -->
    <view v-if="cardInfo.membershipCardType == 2" class="flex justify-between py-2rpx">
      <text class="text-gray-400">套餐余额</text> <text>{{ accountInfo.surplusMealNum || "0" }} 次</text>
    </view>

    <view class="flex justify-between py-2rpx" v-if="cardInfo.membershipCardType == '1'">
      <text class="text-gray-400">助餐补贴</text>
      <u-icon
        @click="showTheSubsidy"
        name="arrow-right"
        label="查看"
        label-pos="left"
        label-size="10rpx"
        label-color="#3e98fc"
        color="#3e98fc"
        size="10rpx"
      ></u-icon>
    </view>

    <!-- 餐补弹窗  -->
    <resultPopup ref="refMealSupplementsPopup" :show-icon="false">
      <template #default>
        <view class="flex flex-col justify-center bg-blue-50 p-10rpx w-300rpx">
          <view class="flex items-center text-base py-8rpx" v-for="(item, index) in mealSupplements" :key="index">
            <view class="text-orange-500 font-bold text-lg"> {{ item.everydaySupplementMoney }} 元 </view>
            <view class="flex flex-col justify-start items-start flex-auto px-15rpx">
              <text class="font-bold block py-5rpx">{{ item.name }} </text>
              <view>
                <text class="text-slate-500">{{ item.superpositionUseFlag == true ? "可叠加" : "不可叠加" }} </text>
              </view>
            </view>
          </view>
          <view v-if="mealSupplements.length == 0" class="w-full mt-20rpx">
            <u-empty mode="data" text=" " :icon="'/static/images/state/state_no_list.png'"></u-empty>
          </view>
        </view>
      </template>
    </resultPopup>
  </view>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import { getCardByCustomerId, accountInfoByCustomerId, listRecordById } from "@/api";
import resultPopup from "@/components/common-popup/result-popup.vue";
import { useStore } from "vuex";
import businessStore from "@/store/modules/business";

const cardTypeMap = {
  1: "会员卡",
  2: "套餐卡",
}

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

const merberInfo = computed(() => props.info);

// 获取到会员信息
const accountInfo = ref({});
const getAccountInfo = async () => {
  const { businessId } = businessStore.getters.businessInfo;
  try {
    const pam = {
      // 	accountType 账户类型（1老人账户、余额账户、积分账户，2志愿者时间币账户 3老人服务补贴账户 5会员卡套餐）
      accountType: "1",
      customerId: merberInfo.value.customerInformationId,
      businessId
    };
    const { data, success } = await accountInfoByCustomerId(pam);
    console.log(data);
    if (!success) throw new Error("获取数据失败");
    accountInfo.value = { ...data };
  } catch (error) {
    console.error(error);
  }
};

// 获取到会员卡信息
const cardInfo = ref({});
const getCardInfo = async () => {
  try {
    const pam = {
      customerId: merberInfo.value.customerInformationId,
    };
    const { data, success } = await getCardByCustomerId(pam);
    if (!success) throw new Error("获取数据失败");
    cardInfo.value = { ...data };
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  getCardInfo();
  getAccountInfo();
});

// 初始化餐补
const mealSupplements = ref([]);

const store = useStore();
// 餐补选择弹窗
const refMealSupplementsPopup = ref();
const initMealSupplements = async () => {
  try {
    const { businessId } = store.getters.businessInfo;
    const pam = { userId: merberInfo.value.customerInformationId, businessId };
    const { data } = await listRecordById(pam);
    mealSupplements.value = data;
  } catch (error) {
    console.error("查询用户餐补失败", error);
  }
};

const showTheSubsidy = async () => {
  await initMealSupplements();
  refMealSupplementsPopup.value.open({ autoClose: false, title: "餐补信息", mode: "readOnly" });
};
</script>
